<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Zooming Examples</title>
	<link href="layout.css" rel="stylesheet" type="text/css"></link>
    <!--[if IE]><script language="javascript" type="text/javascript" src="js/excanvas.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="js/jquery-1.2.6.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script>
 </head>
	<body>
	<h1>Zooming Examples</h1>

	<div style="float:left">
		<div id="placeholder" style="width:500px;height:300px"></div>
	</div>
	
	<div id="miniature" style="float:left;margin-left:20px;margin-top:50px">
		<div id="overview" style="width:166px;height:100px"></div>
		<p id="overviewLegend" style="margin-left:10px"></p>
		<a id="clear" href="#" onclick="">Clear</a>
	</div>

	<script id="source" language="javascript" type="text/javascript">
	$(function () {
		function getData(x1, x2) {
			var d = [];
			for (var i = x1; i < x2; i++) {
				d.push([i, 100 * i]);
			}
			return [
				{ label: "wahaha", data: d }
			];
		}
	
		var options = {
			legend: { show: false },
			lines: { show: true },
			points: { show: true },
			yaxis: { ticks: 10 },
			selection: { mode: "xy" }
		};
	
		var startData = getData(0, 100);
		
		var plot = $.plot($("#placeholder"), startData, options);
	
		// setup overview
		var overview = $.plot($("#overview"), startData, {
			legend: { show: true, container: $("#overviewLegend") },
			lines: { show: true, lineWidth: 1 },
			shadowSize: 0,
			xaxis: { ticks: 1, min: 0, max: 100 },
			yaxis: { ticks: 1, min: 0, max: 10000 },
			grid: { color: "#999" },
			selection: { mode: "xy" }
		});
	
		// now connect the two
		$("#placeholder").bind("plotselected", function (event, ranges) {
			// clamp the zooming to prevent eternal zoom
			if (ranges.xaxis.to - ranges.xaxis.from < 0.00001)
				ranges.xaxis.to = ranges.xaxis.from + 0.00001;
			if (ranges.yaxis.to - ranges.yaxis.from < 0.00001)
				ranges.yaxis.to = ranges.yaxis.from + 0.00001;

			// do the zooming
			plot = $.plot($("#placeholder"), getData(ranges.xaxis.from, ranges.xaxis.to),
						  $.extend(true, {}, options, {
							  xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
							  yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
						  }));
			
			// don't fire event on the overview to prevent eternal loop
			overview.setSelection(ranges, true);
		});
		$("#overview").bind("plotselected", function (event, ranges) {
			plot.setSelection(ranges);
		});
		$("#clear").click(function () {
			plot = $.plot($("#placeholder"), getData(0, 100),
					$.extend(true, {}, options, {
						xaxis: { min: 0, max: 100 },
						yaxis: { min: 0, max: 10000 }
				}));
		});
	});
	</script>
 </body>
</html>